<template>
  <transition name="slide">
    <div v-show="show" class="slidePanel slidePanel-right" >
      <div class="slidePanel-content" v-loading="loading">
        <scroll-bar>
        <header class="slidePanel-header">
          <el-button v-on:click="show = !show" icon="el-icon-close" circle class="slidePanel-close" ></el-button>
            <el-steps :active="stepsActive" align-center class="order-steps">
              <el-step title="下单" description="2018-01-09 13:41:25">
                <svg-icon slot="icon" icon-class="order" />
              </el-step>
              <el-step title="付款">
                <svg-icon slot="icon" icon-class="payment" />
              </el-step>
              <el-step title="发货">
                <svg-icon slot="icon" icon-class="deliver" />
              </el-step>
              <el-step title="完成">
                <svg-icon slot="icon" icon-class="complete" />
              </el-step>
            </el-steps>
        </header>
        <div class="slidePanel-body oder-page">
          <el-card shadow="never">
            <el-row class="text-group" >
              <el-col :span="4">订单编号:</el-col>
              <el-col :span="20">{{ order_no }}</el-col>
            </el-row>
            <el-row class="text-group">
              <el-col :span="4">付款方式:</el-col>
              <el-col :span="20">{{ payment }}</el-col>
            </el-row>
            <el-row class="text-group">
              <el-col :span="4">买家 :</el-col>
              <el-col :span="20">{{ customer.name }}</el-col>
            </el-row>
            <hr>
            <el-row class="text-group">
              <el-col :span="4">配送方式:</el-col>
              <el-col :span="20">{{ distMode }}</el-col>
            </el-row>
            <el-row class="text-group">
              <el-col :span="4">收货信息: </el-col>
              <el-col :span="20">{{ address }}</el-col>
            </el-row>
            <hr>
            <el-row class="text-group">
              <el-col :span="4">买家留言 :</el-col>
              <el-col :span="20">{{ message }}</el-col>
            </el-row>
            <el-row class="text-group">
              <el-col :span="4">商家备注 :</el-col>
              <el-col :span="20"></el-col>
            </el-row>
          </el-card>

          <el-card class="no-padding" shadow="never">
            <el-table
              :data="orderItems"
              style="width: 100%">
              <el-table-column
                label="商品名称"
                width="300">
                <template slot-scope="scope">
                  <div class="slidepanel">
                    <div class="slidepanel-box">
                      <div class="slidepanel-box-left">
                        <img :src="scope.row.product_pic" alt="">
                      </div>
                      <div class="slidepanel-box-right">
                        <div class="p-item"><a href="###">{{ scope.row.product_name }}</a></div>
                        <div class="p-item p-item-sub">{{ scope.row.product_info }}</div>
                      </div>
                    </div>
                </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="product_price"
                label="单价"
                width="*">
              </el-table-column>
              <el-table-column
                prop="count"
                label="数量">
              </el-table-column>
              <el-table-column
                label="运费">
                <template slot-scope="scope">
                  <span>0</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="amount"
                label="小计">
                <template slot-scope="scope">
                  {{ (parseFloat(scope.row.product_price) * parseInt(scope.row.count)).toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <el-card class="no-padding" shadow="never">
            <el-table
              prop="name"
              :data="order"
              style="width: 100%">
              <el-table-column
                prop="product_amount"
                align="center"
                label="订单金额">
              </el-table-column>
              <el-table-column
                prop="logistics_fee"
                align="center"
                label="运费">
              </el-table-column>
              <el-table-column
                prop="discounts"
                align="center"
                label="优惠">
              </el-table-column>
              <el-table-column
                prop="adjustment"
                align="center"
                label="涨价/减免">
              </el-table-column>
              <el-table-column
                prop="order_amount"
                align="center"
                label="实付金额">
              </el-table-column>
            </el-table>
          </el-card>

          <el-row class="order-action" >
            <el-button type="primary" disabled>修改价格</el-button>
            <el-button type="danger">关闭订单</el-button>
          </el-row>
        </div>
        </scroll-bar>
      </div>
    </div>
  </transition>
</template>
<script>
import ScrollBar from '@/components/ScrollBar'
import { show } from '@/api/order'

export default {
  components: { ScrollBar },
  data() {
    return {
      orderItems: [],
      order_no: 0, // 订单编号
      payment: '在线支付',
      customer: {
        id: 0,
        name: ''
      },
      distMode: '', // 配送方式
      address: '', // 发货地址
      message: '', // 卖家留言
      remark: '', // 商家备注
      order: [{
        product_amount: 0,
        order_amount: 0,
        logistics_fee: 0,
        discounts: 0,
        adjustment: 0
      }],
      active: 0,
      show: false,
      loading: false
    }
  },
  mounted() {
    this.$on('show', (val) => {
      this.showOrder(val)
    })
  },
  created() {
  },
  methods: {
    showOrder(id) {
      this.show = true
      this.loading = true
      show(id).then(res => {
        if (res.status === 'success') {
          this.loading = false
          this.order_no = res.data.order_no
          this.distMode = ''
          this.address = res.data.address
          this.message = ''
          this.remark = ''
          this.customer.name = res.data.user.name
          this.orderItems = res.data.products
          this.order[0].product_amount = res.data.product_amount_total
          this.order[0].order_amount = res.data.order_amount_total
          this.order[0].logistics_fee = res.data.logistics_fee
          this.active = res.data.status
        } else {
          this.$message.error('订单信息获取失败')
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  computed: {
    stepsActive: function() {
      let active = 0
      switch (this.active) {
        case 0:
          active = 1
          break

        case 1:
          active = 2
          break

        case 2:
          active = 3
          break

        case 3:
          active = 4
          break

        default:
          active = 0
          break
      }
      return active
    }
  }
}
</script>
<style lang="scss" scoped>
  .slidePanel {
    position: fixed;
    z-index: 1310;
    max-width: 100%;
    height: 100%;
    box-shadow: rgba(66, 66, 66, 0.2) -10px 0px 20px 0px;
    background: rgb(255, 255, 255);
    transform: translate3d(0%, 0px, 0px);
    &.slidePanel-right {
      top: 0;
      right: 0;
    }
    .slidePanel-content {
      width: 700px;
      height: 100%;
      background: #f1f4f5;
    }
    .slidePanel-header {
      position: relative;
      padding: 35px 30px;
      padding-right: 0;
      color: #fff;
      background: #fff;
      .slidePanel-close {
        position: absolute;
        left: 20px;
        top: 5px;
        font-size: 20px;
        font-weight: bold;
        background: transparent;
        border: none;
        box-shadow: none;
      }
    }
    .slidePanel-body {
      padding: 20px 20px;
      background: #f1f4f5;
    }
    .scroll-container{
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
  .slide-enter-active, .slide-leave-active {
    transition: 0.5s ease;
  }
  .slide-enter, .slide-leave-to {
    transform: translate3d(100%, 0px, 0px);
  }
  .order-action {
    text-align: center;
  }
  .text-group {
    font-size: 14px;
    margin-bottom: 10px;
    color: #76838f;
  }
  .oder-page hr {
      border: 0;
      border-top: 1px solid #e4eaec;
      margin: 0px;
      margin-top: 5px;
      margin-bottom: 15px;
  }

.slidepanel-box {
  display: table;
  margin-top: 8px;
  font-size: 14px;
  .slidepanel-box-left ,
  .slidepanel-box-right {
    display: table-cell;
    vertical-align: top;
    text-align: left;
    img {
      border-radius: 0px;
      max-width: 80px;
    }
  }
  .slidepanel-box-left {
    padding-right: 8px;
  }
  .slidepanel-box-right {
    width: 10000px;
    overflow: hidden;
    line-height: 1.45;
    .p-item-sub {
      color: #76838f;
    }
    .p-dec {
      float: right;
      padding-right: 10px;
      font-size: 12px;
      text-align: right;
      color: #888;
      p {
        line-height: 1;
        margin: 0;
      }
    }
  }
}

</style>
<style>
  .order-steps .el-step__icon {
    width: 46px;
    height: 46px;
    font-size: 23px;
    line-height: 1;
    color: #fff;
    background-color: #ccd5db;
    border-color: #ccd5db;
  }
  .order-steps .el-step.is-horizontal .el-step__line {
    height: 4px;
    top: 21px;
    background-color: #f3f7f9;
  }
  .order-steps .el-step__head.is-finish .el-step__icon {
    color: #409EFF;
    border-color: #409EFF;
    background: #fff;
  }
  .order-steps .el-step__line-inner{
    border-width: 2px !important;
  }
  .order-steps .el-step__head.is-wait .el-step__icon,
  .order-steps .el-step__head.is-process .el-step__icon {
    transform: scale(0.8);
  }
  .order-steps .el-step__title.is-wait,
  .order-steps .el-step__title.is-process {
    color: #526069;
    font-weight: normal;
  }
  .order-steps .el-step.is-center .el-step__description {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    color: #999;
  }
  .order-steps .el-step__title {
    line-height: 32px;
  }
  .oder-page .el-card {
    margin-bottom: 24px;
  }
  .oder-page .el-card.no-padding .el-card__body {
    padding: 0;
  }
</style>